<template>
  <el-card class="card">
    <Header class="header">
      <template #left>
        <el-button
          type="primary"
          size="small"
          @click="addBorker"
        >添加经纪</el-button>
      </template>
      <template #right>
        <el-input
          v-model="value"
          placeholder="请输入关键字"
          @keydown.enter.native="searchBtn"
        >
          <el-button slot="append" icon="el-icon-search" @click="searchBtn" />
        </el-input>
      </template>
    </Header>
    <hr>
    <transition name="fade-transform" mode="out-in">
      <el-table v-show="isshow" :data="tableData" border style="width: 100%">
        <el-table-column prop="image" label="图片" width="260">
          <template #default="obj">
            <img :src="obj.row.image" alt="">
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" width="180" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="phone" label="电话" />
        <el-table-column prop="address" label="地址" />
        <el-table-column prop="desc" label="介绍" />
        <el-table-column label="操作">
          <template #default="obj">
            <el-button type="primary" size="small" @click="editBtn(obj.row.id)">
              编辑
            </el-button>
            <el-button type="danger" size="small" @click="delBtn(obj.row.id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </transition>
    <el-row type="flex" justify="center">
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="page._limit"
        :current-page.sync="currentPage"
        @current-change="changePage"
      />
    </el-row>
    <borkerDialog
      ref="formData"
      :is-show-dialog="isShowDialog"
      @cancel="cancelBtn"
      @OKbtn="OKbtn"
    />
  </el-card>
</template>

<script>
import Header from '@/components/header/index.vue'
import borkerDialog from '@/views/borker/components/borkerDialog.vue'
import {
  getBorker,
  getBorkerCount,
  getBorkerById,
  delBorker
} from '@/api/borker'
export default {
  components: {
    Header,
    borkerDialog
  },
  data() {
    return {
      isshow: true,
      tableData: [], // 经纪列表
      page: {
        _limit: 2,
        _start: 0,
        name_contains: ''
      },
      total: 0,
      isShowDialog: false,
      value: '',
      currentPage: 1
    }
  },

  created() {
    this.getBorkerList()
    this.getBorkerCount()
  },
  methods: {
    // 搜索按钮
    async searchBtn() {
      this.page.name_contains = this.value
      this.page._start = 0
      this.currentPage = 1
      const res = await getBorker(this.page)
      const count = await getBorker({ name_contains: this.page.name_contains })
      console.log(83, count)
      this.total = count.data.length
      this.tableData = res.data
      this.value = ''
    },
    // 删除按钮
    async delBtn(id) {
      await this.$confirm('是否确定删除')
      await delBorker(id)
      const count = await getBorker({ name_contains: this.page.name_contains })
      this.total = count.data.length
      if (this.tableData.length === 1) {
        if (this.page._start > 2) {
          this.page._start = this.page._start - 2
        } else if (this.page._start > 1) {
          this.page._start = 0
        }
      }
      this.getBorkerList()
    },
    // 编辑按钮
    async editBtn(id) {
      const { data } = await getBorkerById(id)
      this.$refs.formData.borkerForm = data
      this.$refs.formData.fileList = [
        {
          url: data.image
        }
      ]
      this.$refs.formData.title = '编辑经纪'
      this.isShowDialog = true
    },
    // 子传父通知确定按钮更新数据
    async OKbtn(id) {
      if (!id) {
        const count = await getBorker({ name_contains: this.page.name_contains })
        this.total = count.data.length
        this.currentPage = Math.ceil(this.total / 2)
        this.page._start = (this.currentPage - 1) * this.page._limit
        this.getBorkerList()
      } else {
        this.getBorkerList()
      }
    },
    // 子传父通知取消按钮
    cancelBtn() {
      this.title = ''
      this.isShowDialog = false
    },
    // 添加按钮
    addBorker() {
      this.$refs.formData.title = '添加经纪'

      this.isShowDialog = true
      this.getBorkerCount()
    },
    // 获取经纪列表
    async getBorkerList() {
      const res = await getBorker({ ...this.page })
      this.tableData = res.data
    },
    // 获取条数
    async getBorkerCount() {
      const res = await getBorkerCount()
      this.total = res.data
      console.log(res)
    },
    // 点击页码重新渲染数据
    changePage(newPage) {
      this.isshow = false
      setTimeout(() => {
        this.isshow = true
      }, 100)
      this.page._start = (newPage - 1) * this.page._limit
      this.getBorkerList()
    }
  }
}
</script>

<style lang="less" scoped>
.card {
  margin: 20px;
  .header {
    margin-bottom: 30px;
  }
  hr {
    border: none;
    height: 1px;
    background-color: #e5e5e5;
    margin-bottom: 25px;
  }

  img {
    object-fit: cover;
    width: 232px;
    height: 200px;
  }
}
/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.1s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-80px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(50px);
}
</style>
